<template>
	<view class="wrap">
		<view v-if="list !== null">
			<view class="title">
				<dyDatePicker :childValue="selectData" timeType="month" @getData="getData" placeholder="请选择日期" minSelect="2019/01/01" :maxSelect="nowData"></dyDatePicker>
				<!-- <view class="info">收入￥999.9</view> -->
			</view>

			<view v-if='list.length === 0' class="none_data">
				<u-empty text="暂无账单" mode="history"></u-empty>
			</view>
			<view v-else>
				<view class="item u-border-bottom" v-for="(item, index) in list" :key="index">
					<view style="display: flex;float: left;align-items: center;">
						<image src="../../static/img/money.png" mode="aspectFill" style="width: 56upx;height: 56upx;margin-right: 40upx;"></image>
						<view>
							<view class="line1">{{ item.transType | transTypeText }}</view>
							<view class="line2">{{ item.accountEntryT | accountEntryTTime }}</view>
						</view>
					</view>
					<!-- 账单类型(0:收入, 1:支出) -->
					<view>
						<span v-if="item.billType === 0">+</span>
						<span v-if="item.billType === 1">-</span>
						{{ item.amountMoney }}
					</view>
				</view>
				<u-loadmore :status="status" />
			</view>
		</view>

		<!-- loading -->
		<view v-else></view>

	</view>
</template>

<script>
	import dyDatePicker from '@/components/dy-Date/dy-Date.vue'
	import { isBlank, parseTime } from '@/utils/common.js'
	
	export default {
		components: {
			dyDatePicker
		},
		data() {
			return {
				time: null,
				status: 'loadmore', // 通过status设置组件的状态，加载前值为loadmore，加载中为loading，没有数据为nomore
				list: null,
				page: 0,
				selectData: '',
				nowData: null,

				pageNum: 1,
				pageSize: 10
			};
		},
		onLoad() {
			// 获取当前年月日
			const date = new Date()
			let	year = date.getFullYear()
			let	month = date.getMonth() + 1
			let	day = date.getDate()
			this.nowData = `"${year}/${month}/${day}"`;

			this.fetchData()
		},
		filters: {
			transTypeText(val) {
				// 0:订单收入, 1:现金券收入, 2:订单支出, 3: 优惠券支出, 4:退款, 5:提现
				switch (val){
					case 0:
						return '订单收入'
						break;
					case 1:
						return '现金券收入'
						break;
					case 2:
						return '订单支出'
						break;
					case 3:
						return '优惠券支出'
						break;
					case 4:
						return '退款'
						break;
					case 5:
						return '提现'
						break;
				}
			},
			accountEntryTTime(val) {
				return parseTime(val)
			},
		},
		computed: {
			// 价格小数
			// priceDecimal() {
			// 	return val => {
			// 		if (val !== parseInt(val)) return val.slice(-2);
			// 		else return '00';
			// 	};
			// },
			// // 价格整数
			// priceInt() {
			// 	return val => {
			// 		if (val !== parseInt(val)) return val.split('.')[0];
			// 		else return val;
			// 	};
			// }
		},
		methods: {
			onReachBottom() {
				if(this.status === 'loadmore') {
					this.getMoreData()
				}
			},
			// 页面数据
			fetchData() {
				var data = {
					pageNum: this.pageNum,
					pageSize: this.pageSize
				}
				
				if(!isBlank(this.selectData)) {
					data.startDate = this.selectData[0]
					data.endDate = this.selectData[1]
				}
				
				console.log(data)
				this.status = 'loadmore';
				this.$u.api.findMyRevenue().then(res => {
					if (res.code === 200) {
						this.list = res.data.records
					}
				})
			},
			getMoreData() {
				this.status = 'loading';
				this.pageNum++;
				
				var data = {
					pageNum: this.pageNum,
					pageSize: this.pageSize
				}
				
				if(!isBlank(this.selectData)) {
					data.startDate = this.selectData[0]
					data.endDate = this.selectData[1]
				}
				
				this.$u.api.findMyRevenue(data).then(res => {
					if (res.code === 200) {
						this.list = this.list.concat(res.data.records)
						if(this.list.length < res.data.total) {
							this.status = 'loadmore'
						}else {
							this.status = 'nomore'
						}
					}
				})
			},
			// 选择月份
			getData(e) {
				// 
				// console.log(this.$u.timeFormat(this.timestamp, 'yyyy-mm-dd');)
				this.selectData = e
				this.pageNum = 1
				console.log(this.selectData)
				this.fetchData()
			}
		}
	};
</script>


<style lang="scss">
	.wrap {
		.title {
			padding: 40upx 30upx 20upx 30upx;

			.info {
				padding-top: 20upx;
				font-size: 28upx;
				font-weight: 400;
				color: #909090;
			}
		}


	}

	.item {
		padding: 48upx 30upx;
		color: $u-content-color;
		font-size: 28rpx;
		background-color: white;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.line1 {
			font-size: 28upx;
			font-weight: normal;
			color: #333333;
		}

		.line2 {
			padding-top: 12upx;
			font-size: 24upx;
			font-weight: 400;
			color: #909090;
		}
	}

	.none_data {
		margin-top: 300upx;
	}
</style>
